<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!- css ->
    <style type="text/css">
    	.login_table{
    		border: 1px;
    		margin: 0 auto;
    		width: 500px;
    	}
    	.mybackcolor{
    		background-color:#ccccff; 
    		height: 50px;
    		width: 25%;
    	}
    	.mybackcolor2{
    		text-align: left;
    		background-color:#ccccff; 
    		height: 50px;
    		width: 75%;
    	}
    	.mybackcolorlong{
    		background-color:#ccccff; 
    		width: 25%;
    		height:200px;
    	}
    	.dropdown {
		    position: relative;
		    display: inline-block;
		}
		.myth{
			height: 37px;
    		width: 75%;
		}
		.myth2{
			height: 185px;
    		width: 98%;
		}
	    </style>
	    <script type="text/javascript">
	    	//提交按钮事件
	    	function complete(argument) {
	    		// body...
	    		//document.write(name.value);
	    		//读取值
	    		var name = document.getElementById("name_id");
	    		var password = document.getElementById("password");
	    		var password2 = document.getElementById("password2");
	    		var man = document.getElementById("man");
	    		var woman = document.getElementById("woman");
	    		var univer = document.getElementById("univer");
	    		var jieshao = document.getElementById("jieshao");
	    		var text = "";
	    		var re_name=/^[a-zA-Z]{1}[a-zA-Z0-9_]{2,17}$/
	    		//姓名
	    		if(name.value =="" ){
	    			text += "姓名不能为空\n"
	    		}
	    		else{

					if(!re_name.test(name.value)){
						text += "姓名格式不正确，姓名由3-18位数字、字母、下划线组成，且第一个字符必须为字母。\n"
					}
	    		}	
	    		//密码 
	    		if(password.value == ""){
	    			text += "请输入密码\n"	    			
	    		}
	    		else{
	    			if(password2.value == ""){
	    				text += "请输入确认密码\n"
	    			}
	    			else{
	    				if(password.value != password2.value){
	    					text += "两次输入密码不相同\n"
	    				}
	    			}
	    		}
	    		//自我介绍
	    		if(jieshao.value == ""){
	    			text += "请输入自我介绍\n"
	    		} 
	    		//注册失败
	    		if(text != ""){
	    			alert(text);
	    		} 
	    		//注册成功 		
	    		else{
	    			alert("注册成功");
	    			window.location.reload();
	    		}
	    		//var password2 = document.getElementByName("password2");
	    		//var gender = document.getElementByName("gender");
	    		//alert(text);
	    	}
	    	function reset(argument) {
	    		// body...
	    		//刷新
	    		window.location.reload();
	    	}
	    	
	    </script>
</head>
<body>
<table class="login_table">
	<tr>
		<th colspan="2" class="mybackcolor">用户注册</th>
	</tr>
	<tr>
		<th class="mybackcolor">用户名：</th>
		<th class="mybackcolor2">
			<input type="text" name="name" id="name_id" placeholder="请输入用户名：" class="myth"></th>
	</tr>
	<tr>
		<th class="mybackcolor">密码：</th>
		<th class="mybackcolor2">
			<input type="text" name="password" id="password" placeholder="请输入密码：" class="myth"></th>
	</tr>
	<tr>
		<th class="mybackcolor">密码确认：</th>
		<th class="mybackcolor2">
			<input type="text" name="password2" id="password2" placeholder="请输入密码：" class="myth"></th>
	</tr>
	<tr>
		<th class="mybackcolor">性别：</th>
		<th class="mybackcolor2">
			<input id="man" type="radio" name="gender" checked value="man"><label for="man">男</label>
            <input id="woman" type="radio" name="gender" value="woman"><label for="woman">女</label>
		</th>
	</tr>
	<tr>
		<th class="mybackcolor">你来自：</th>
		<th class="mybackcolor2">	
			<select name="cars" id="univer" class="mybackcolor2">
			<option value="volvo">山东大学</option>
			<option value="saab">哈尔滨工业大学</option>
			<option value="opel">清华大学</option>
			<option value="audi">北京大学</option>
			</select>
		</th>
	</tr> 
	<tr>
		<th class="mybackcolorlong" >自我介绍：</th>
		<th class="mybackcolor2">
			<input type="text" name="" placeholder="自我介绍：" id="jieshao" class="myth2"></th></th>
	</tr>
	<tr>
		<th class="mybackcolor"></th>
		<th class="mybackcolor2">
			<button type="submit" value="提交" onclick="complete()">提交</button>
			<button type="submit" value="重置" onclick="reset()">重置</button>
		</th>
	</tr>
</table>
</body>
</html>

